<template>
    <ion-page>
      <ion-header>
        <ion-toolbar>
          <ion-title>404 - Not Found</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <div class="ion-text-center">
          <h1>404</h1>
          <p>The page you're looking for could not be found.</p>
          <ion-button @click="goHome">Go Home</ion-button>
        </div>
      </ion-content>
    </ion-page>
  </template>
  
  <script setup lang="ts">
  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const goHome = () => {
    router.push('/');
  };
  </script>
  
  <style scoped>
  h1 {
    font-size: 64px;
    margin-bottom: 16px;
  }
  
  p {
    font-size: 18px;
    margin-bottom: 32px;
  }
  </style>    